import {
  Drawer,
  Form,
  Button,
  Tabs,
} from 'antd';

import React from 'react';
import { connect } from 'dva';
import DeliveryReceiptInfo from './DeliveryReceiptInfo';
// import WordOrderInfo from './WordOrderInfo';
// import Exception from './Exception';
import MarketInfo from './MarketInfo';
import SendOrderLIst from './SendOrderList';

const { TabPane } = Tabs;
let deliveryReceiptInfo: any = {};
// const wordOrderInfo: any = {};
// const exception: any = {};
let marketInfo: any = {};
let sendOrderList: any = {};

const ServiceOrderDetail = Form.create()(
  class CreateForm extends React.Component {
    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
      };
    }

    state = { open: false };

    handleConfirm = (props: any) => {
    };

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;


      // @ts-ignore
      return (
        <div>
          <Drawer
            title="服务单详情,服务单号:zbt1251611561"
            width={900}
            onClose={this.handleCancel}
            visible={this.state.open}
          >
            <Form layout="vertical" hideRequiredMark>
              <Tabs tabPosition="top">
                <TabPane tab="售前" key="1">
                  {/* eslint-disable-next-line no-return-assign,max-len */}
                    <MarketInfo wrappedComponentRef={(inst: any) => (marketInfo = inst)}
                               {...marketInfo}
                    />
                </TabPane>

                <TabPane tab="报价单" key="2">
                  {/* eslint-disable-next-line no-return-assign,max-len */}
                  <DeliveryReceiptInfo wrappedComponentRef={(inst: any) => (deliveryReceiptInfo = inst)}
                                       {...deliveryReceiptInfo}
                  />
                </TabPane>

                <TabPane tab="工作单" key="5">
                  {/* eslint-disable-next-line no-return-assign,max-len */}
                  <SendOrderLIst wrappedComponentRef={(inst: any) => (sendOrderList = inst)}
                                       {...sendOrderList}
                  />
                </TabPane>

                {/* <TabPane tab="工作单" key="3"> */}
                {/*  /!* eslint-disable-next-line no-return-assign,max-len *!/ */}
                {/*  <WordOrderInfo wrappedComponentRef={(inst: any) => (wordOrderInfo = inst)} */}
                {/*                       {...wordOrderInfo} */}
                {/*  /> */}
                {/* </TabPane> */}

                {/* <TabPane tab="异常" key="4"> */}
                {/*  /!* eslint-disable-next-line no-return-assign,max-len *!/ */}
                {/*  <Exception wrappedComponentRef={(inst: any) => (exception = inst)} */}
                {/*    {...exception} */}
                {/*  /> */}
                {/* </TabPane> */}
              </Tabs>

            </Form>
            <div
              style={{
                position: 'absolute',
                left: 0,
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e9e9e9',
                padding: '10px 16px',
                background: '#fff',
                textAlign: 'right',
              }}
            >
              <Button onClick={() => this.handleCancel()} style={{ marginRight: 8 }}>
                取消
              </Button>
              <Button onClick={() => this.handleCancel()} type="primary">
                保存
              </Button>
            </div>
          </Drawer>
        </div>

      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.creditFinance,
  };
}

export default connect(mapStateToProps)(ServiceOrderDetail);
